<template>
  <div>
    <topBar></topBar>
    <div class="container my-5">
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 shadow-lg">
        <h2 class="align-center">{{ title }}</h2>
        <br /><br />
        <div class="row">
          <div class="col-lg-4"></div>
          <div class="col-lg-3">
            <h6>来源：{{ source }}</h6>
          </div>
          <div class="col-lg-3">
            <h6>日期：{{ date }}</h6>
          </div>
        </div>
        <div id="content">
          <p>{{ content }}</p>
        </div>

        <a :href="url">原文链接</a>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/util/topBar";
export default {
  data() {
    return {
      title: "",
      source: "",
      date: "",
      url: "",
      content: "",
    };
  },
  components: {
    topBar: topBar,
  },
  mounted() {
    this.title = this.$route.query.title;
    this.source = this.$route.query.source;
    this.date = this.$route.query.date;
    this.url = this.$route.query.url;

    this.axios
      .get(
        "http://122.51.157.58:8081/api-service/getAgriNyywArtical?key=123456&title=" +
          this.title
      )
      .then((body) => {
        this.data = body.data.data.result[0];
        this.content = this.data.text;
      });
  },
};
</script>

<style scoped>
.align-center {
  text-align: center;
}
header {
  background-color: #2c7d72;
}
</style>
